<template>
  <div class="demo-date-picker">
      <!-- 日期选择，请假类型，请假状态 -->
  <div class="block">
    <span class="demonstration">选择日期：</span>
    <el-form-item >
    <el-date-picker
      v-model="leavetime"
      type="date"
      placeholder="Pick a day"
    />
  </el-form-item>
    <span class="demonstration">请假类型：</span>
    <el-select v-model="value" class="m-1" placeholder="Select">
  <el-option
    v-for="item in options_type"
    :key="item.value"
    :label="item.label"
    :value="item.value"
  />
  </el-select>
  <span class="demonstration">请假状态：</span>
  <el-select v-model="value" class="m-2" placeholder="Select">
  <el-option
    v-for="item in options_status"
    :key="item.value"
    :label="item.label"
    :value="item.value"
  />
  </el-select>
  <el-button type="primary">查询</el-button>
  <el-button plain @click="reset()">重置</el-button>
  </div>
  </div>
  <!-- 请假按钮 -->
  <div class="leave">
      <el-button type="primary" >导出</el-button>
      <!-- <el-button text @click="dialogFormVisible = true">请假</el-button> -->

  </div>
  <!-- 请假表格 -->
  <el-table :data="state.tableData" stripe style="width: 100%">
      
      <el-table-column prop="num" label="序号" width="100" />
      <el-table-column prop="name" label="请假学生" width="100" />
      <el-table-column prop="grade" label="年级班级" />
      <el-table-column prop="leavetype" label="请假类型" />
      <el-table-column prop="leavetime" label="请假时间" />
      <el-table-column prop="leavereason" label="请假事由" />
      <el-table-column prop="promoter" label="发起人" />
      <el-table-column prop="leavestatus" label="请假状态" />
      <el-table-column prop="name" label="操作" >
          <template #default="scope">
              <el-button link type="primary" size="small" @click.prevent="editRow(scope.row)" @click="router.push('/index/family-schoolInteraction/LeaveListformcheck')">查看</el-button>
          </template>
      </el-table-column>
  </el-table>
  <!-- 分页 -->
  <el-pagination
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="state.total"
      :page-size="state.pageSize"
      :current-page="state.currentPage"
      :page-sizes="state.pageSizes"
      @size-change="sizeChange"
      @current-change="changePage"
    />
</template>

<script setup>
import { onMounted, ref ,reactive} from 'vue'
import {leave_list} from '../../../utils/api'
import {Check,Delete,Edit,Message,Search,Star,} from '@element-plus/icons-vue'
import {useStudentsleaveStore} from '../../../stores/Family-schoolInteractiongll/Studentsleave'
import { useRouter } from 'vue-router'
import axios from 'axios'
var ShoplistData = ref({ list: [] });
var $store = useStudentsleaveStore()
//获取数据仓库
// console.log($store)
// 获取路由对象
var router = useRouter()
onMounted(()=>{
$store.leave_List();
list();
// listData.value = $store.leavelist;
})

// 日期选择器
const value1 = ref('')
const value2 = ref('')
// 下拉框
const value = ref('')
// 日期选择定义
const shortcuts = [
{
  text: 'Last week',
  value: () => {
    const end = new Date()
    const start = new Date()
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
    return [start, end]
  },
},
{
  text: 'Last month',
  value: () => {
    const end = new Date()
    const start = new Date()
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
    return [start, end]
  },
},
{
  text: 'Last 3 months',
  value: () => {
    const end = new Date()
    const start = new Date()
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
    return [start, end]
  },
},
]
// 下拉框选择类型
const options_type = [
{
  value: 'Option1',
  label: '事假',
},
{
  value: 'Option2',
  label: '病假',
},
]
const options_status = [
{
  value: 'Option1',
  label: '待审核',
},
{
  value: 'Option2',
  label: '已通过',
},
]
// 获取学生请假列表
var deleteRow = (row)=>{
  // console.log(row.id);
  $store.leaveList_delete(row.id)
}
var editRow = (row)=>{
  // console.log(row.id);
  $store.leaveList_check(row.id);
}
// const indexMethod = (index)=>{
//     return index + 1;
// }
var listData = ref([])
var reset = ()=>{

}
// 分页
const list = () => {
  axios.get("/api/leave/list").then((res) => {
    // console.log(res);
    ShoplistData.value.list = res.data.list;
    // console.log(ShoplistData.value.list);
    goodslistpage();
  });
};
const goodslistpage = () =>{
  state.value.tableData = ShoplistData.value.list.slice(
      (state.value.currentPage - 1) * state.value.pageSize,
      state.value.currentPage * state.value.pageSize,
    );
    state.value.total = ShoplistData.value.list.length;
}

//创建响应式数据
const state = ref({
  tableData: [],
  total: 0,
  pageSize: 5,
  currentPage: 1,
  pageSizes: [3, 5, 10, 20, 50, 100, 200, 300, 400, 500, 1000], //可选择的一页多少条
});

const changePage = (val) => {
  console.log("翻页，当前为第几页", val);
  state.value.currentPage = val;
  list();
};

const sizeChange = (val) => {
  console.log("改变每页多少条，当前一页多少条数据", val);
  state.value.pageSize = val;
  state.value.currentPage = 1;
  list();
};

</script>

<style scoped>
.demo-date-picker {
display: flex;
justify-content: space-around;
width: 100%;
padding: 0;
flex-wrap: wrap;
margin-bottom: 20px;
}
.demo-date-picker .block {
/* padding: 30px 0; */
text-align: center;
/* border-right: solid 1px var(--el-border-color); */
flex: 1;
width: 0;
height: 30px;
line-height: 30px;
display: flex;
justify-content: space-around;
}
.demo-date-picker .block:last-child {
border-right: none;
}
.demo-date-picker .demonstration {
display: block;
color: var(--el-text-color-secondary);
font-size: 14px;
margin-bottom: 20px;
}
.el-range-editor.el-input__inner {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  /* margin: 0 50px; */
}
.el-date-picker{
  width: 300px;
  margin: 0 50px;

  /* margin: 0 20px; */
}
.el-button{
  margin: 0 5px;
}
.leave{
  display: flex;
  justify-content: flex-end;
  margin: 5px 10px;
}
.teacher{
  height: 60px;
  line-height: 50px;
  margin:10px 0 20px 50px;
}
.checkleave{
  margin-left: 20px;
  font-size: 17px;
}
.el-pagination{
  justify-content: flex-end;
  margin-top: 10px;
}
</style>